{% extends "raw.html.j2" %}
{% block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/ui/pkg/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/pkg/bootstrap/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/pkg/fontawesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/ui/web/ip/ipam/css/vrf_index.css" />
<script TYPE="text/javascript" SRC="/ui/pkg/jquery/jquery.min.js"></script>
<script TYPE="text/javascript" SRC="/ui/pkg/bootstrap/js/bootstrap.min.js"></script>
{% endblock %}
{% block content %}
<style>
th[class=vrf] {
    width: 150px;
}

th[class="addresses"] {
    width: 50px;
}

th[class=state] {
    width: 70px;
}

th[class=project] {
    width: 70px;
}

th[class=rd] {
    width: 50px;
}

.group-name {
    font-size: 1.2em;
    font-weight: bold;
}
</style>
<!-- breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
      <li class="breadcrumb-item">IPAM</li>
     <li class="breadcrumb-item active">VRF</li>
  </ol>
</nav>

<div>

</div>

<div id="toolbar">
    <form id="changelist-search" action="" method="get">
        <input
          type="text"
          class="form-control position-static"
          placeholder="Select VRF..."
          size="40"
          name="q"
          value="{{query}}"
          id="searchbar"
          autofocus
        />
    </form>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th class="vrf">VRF</th>
            <th class="state">State</th>
            <th class="rd">RD</th>
            <th class="vpn_id">VPN ID</th>
            <th class="addresses">IPv4</th>
            <th class="addresses">IPv6</th>
            <th class="project">Project</th>
            <th class="description">Description</th>
            <th class="bookmarks">Bookmarks</th>
            <th class="tags">Tags</th>
        </tr>
    </thead>
    <tbody>

{% for g in groups %}
    <tr>
        <td colspan="10" class="group-name">
            <i class="fa fa-chevron-right"></i>
            {{ g.0.name }}
        </td>
    </tr>

    {% for vrf in g.1 %}
        <tr>
            <td style="padding-left: 16px">{{vrf.name}}</td>
            <td title="{{ vrf.state.description|safe }}">{{vrf.state.name}}</td>
            <td>{{vrf.rd}}</td>
            <td>{{vrf.vpn_id}}</td>
            <td>{% if vrf.afi_ipv4 %}<a class="changelink" href="/ip/ipam/{{ vrf.id }}/4/0.0.0.0/0/" title="View"><i class="fa fa-eye"></i></a>{% endif %}</td>
            <td>{% if vrf.afi_ipv6 %}<a class="changelink" href="/ip/ipam/{{ vrf.id }}/6/::/0/" title="View"><i class="fa fa-eye"></i></a>{% endif %}</td>
            <td>{% if vrf.project %}{{ vrf.project.code }}{% endif %}</td>
            <td>{% if vrf.description %}{{vrf.description}}{% endif %}</td>
            <td>
                {% if vrf.bookmarks %}
                    <div class="dropdown" style="display: inline-block">
                        <button class="btn btn-sm btn-secondary dropdown-toggle"
                                type="button" id="dropdownMenu1"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Favorites
                        <span class="caret"></span>
                        </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        {% for p in vrf.bookmarks %}
                            <li><a class="dropdown-item" href="/ip/ipam/{{ p.vrf.id }}/{{ p.afi }}/{{ p.prefix }}/">{{p.prefix}} {{p.short_description}}</a></li>
                        {% endfor %}
                      </ul>
                    </div>
                {% endif %}
            </td>
            <td>{% if vrf.tags %}{% for tag in vrf.tags %}<span class="badge badge-secondary">{{ tag }}</span>{% endfor %}{% endif %}</td>
        </tr>
    {%endfor%}
{%endfor%}
</tbody>
</table>
{%endblock%}
